<template>
  <table class="ex-sub-form-table">
    <tr>
      <template v-if="widgetData.options.showRowIndex">
        <th v-if="!isShow">
          <div class="row-on-header">序号</div>
        </th>
      </template>
      <template v-if="!isShow">
        <th v-for="item in widgetData.children" :key="item.id">
          <div
            class="row-field-header"
            :class="widgetData.options.labelAlign"
            :style="{ width: item.options.columnWidth }"
          >
            {{ item.options.label }}
          </div>
        </th>
      </template>
      <th>
        <div class="row-action-header">
          <div class="column-label">操作</div>
          <el-button
            class="column-btn"
            type="primary"
            round
            size="small"
            @click="handleAdd"
          >
            新增
          </el-button>
        </div>
      </th>
      <template v-if="isShow">
        <th v-for="item in widgetData.children" :key="item.id">
          <div
            class="row-field-header"
            :class="widgetData.options.labelAlign"
            :style="{ width: item.options.columnWidth }"
          >
            {{ item.options.label }}
          </div>
        </th>
      </template>
    </tr>
    <tr v-for="(subForm, index) of subFormList" :key="index">
      <template v-if="widgetData.options.showRowIndex">
        <td v-if="!isShow">
          <div class="row-on-column">#{{ index + 1 }}</div>
        </td>
      </template>
      <template v-if="!isShow">
        <td v-for="item in widgetData.children" :key="item.id">
          <div
            class="row-field-column"
            :style="{ width: item.options.columnWidth }"
          >
            <form-item
              :designer="designer"
              :widget-data="item"
              :form-data="subForm"
            />
          </div>
        </td>
      </template>
      <td>
        <div class="row-action-column">
          <el-button
            icon="Plus"
            type="primary"
            plain
            circle
            @click="handleInset(index)"
          />
          <el-button
            icon="Delete"
            type="danger"
            plain
            circle
            @click="handleDelete(index)"
          />
          <div v-if="isShow" class="row-on-index">#{{ index + 1 }}</div>
        </div>
      </td>
      <template v-if="isShow">
        <td v-for="item in widgetData.children" :key="item.id">
          <div
            class="row-field-column"
            :style="{ width: item.options.columnWidth }"
          >
            <form-item
              :designer="designer"
              :widget-data="item"
              :form-data="subForm"
            />
          </div>
        </td>
      </template>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { ElMessageBox, Action } from "element-plus";
import { renContainerProps } from "./container";

const props = defineProps(renContainerProps);

const subFormList = ref<Array<object>>([]);
const isShow = computed(
  () => props.widgetData.options.columnPosition === "left"
);

const initSubFormList = () => {
  let { showBlankRow } = props.widgetData.options;
  if (showBlankRow) subFormList.value.push({});
};

const handleAdd = () => {
  subFormList.value.push({});
};

const handleInset = (index: number) => {
  subFormList.value.splice(index + 1, 0, {});
};

const handleDelete = (index: number) => {
  ElMessageBox.alert("删除当前行？", "提示", {
    showCancelButton: true,
    callback: (action: Action) => {
      if (action == "confirm") {
        subFormList.value.splice(index, 1);
      }
    }
  });
};

initSubFormList();
</script>
